<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我要装修" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="bgimg bg-gray">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png" mode="aspectFill" class="img"></image>
			</view>
			
			<u-form :model="form" ref="uForm" class="form">
				<u-form-item type="select" :border-bottom="false" class="form-item" prop="type">
					<view class="form-content border-bottom-none">
						<view class="form-lable">
							<text class="form-lable-text">选择类型</text>
						</view>
						<view class="form-data">
							<u-radio-group 
								active-color='#FFB81E' 
								v-model="form.type" 
								width='50%'
								>
								<u-radio
									v-for="(item, index) in type_radio_list"
									:key="index"
									:name="item"								
									>
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item type="select" :border-bottom="false" class="form-item" prop="designer">
					<view class="form-content border-bottom-none">
						<view class="form-lable">
							<text class="form-lable-text">设计师</text>
						</view>
						<view class="form-data">
							<u-radio-group 
								active-color='#FFB81E' 
								v-model="form.designer" 
								width='50%'
								>
								<u-radio
									v-for="(item, index) in sjs_radio_list"
									:key="index"
									:name="item"
									>
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item type="select" :border-bottom="false" class="form-item" prop="worker">
					<view class="form-content border-bottom-none">
						<view class="form-lable">
							<text class="form-lable-text">工人</text>
						</view>
						<view class="form-data">
							<u-radio-group 
								active-color='#FFB81E' 
								v-model="form.worker" 
								width='50%'
								>
								<u-radio
									v-for="(item, index) in gr_radio_list"
									:key="index"
									:name="item"								
									>
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item type="select" :border-bottom="false" class="form-item" prop="decoration_mode">
					<view class="form-content border-bottom-none">
						<view class="form-lable">
							<text class="form-lable-text">装修方式</text>
						</view>
						<view class="form-data">
							<u-radio-group 
								active-color='#FFB81E' 
								v-model="form.decoration_mode" 
								width='50%'
								>
								<u-radio
									v-for="(item, index) in zxfs_radio_list"
									:key="index"
									:name="item"								
									>
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-gap height="20" bg-color="#F7F7F7"></u-gap>
				<!-- 全装或者局部装 -->
				<u-form-item :border-bottom="false" class="form-item" prop="unit_type">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">选择户型</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.unit_type" disabled="true" placeholder="请选择户型"  @click="show_unitTyp = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>				
				<u-form-item :border-bottom="false" class="form-item" prop="unit_type" style="display: none;">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">选择房间</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.unit_type" disabled="true" placeholder="请选择房间"  @click="show_roomTyp = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<!-- 全装或者局部装 -->
				<u-form-item :border-bottom="false" class="form-item" prop="balcony">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">选择阳台</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.balcony" disabled="true" placeholder="请选择阳台"  @click="show_balcony = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="clrSys">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">选择色系</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.clrSys" disabled="true" placeholder="请选择色系"  @click="show_clrSys = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="style">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">选择风格</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.style" disabled="true" placeholder="请选择风格"  @click="show_style = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-gap height="20" bg-color="#F7F7F7"></u-gap>
				<u-form-item :border-bottom="false" class="form-item" prop="budget">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">预算价位</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.budget" placeholder="请输入预算价位"/>
						</view>
						<text class="end-text">万</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="city">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">所在城市</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.city" disabled="true" placeholder="请选择所在城市"  @click="show_city = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="address">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">详细地址</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.address" placeholder="请输入详细地址"/>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="area">
					<view class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">房屋面积</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.area" placeholder="请输入房屋面积"/>
						</view>
						<text class="end-text">m²</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<navigator url="../personal/case_like" hover-class="none" class="form-content form-padding">
						<view class="form-lable">
							<text class="form-lable-weight">我喜欢的案例</text>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</navigator>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<view class="form-content flex-wrap border-bottom-none">
						<button class="circle-btn" @click="submit()">确定</button>
					</view>
				</u-form-item>
			</u-form>			
			
		</view>
		<!-- 选择器 -->
		<u-select confirm-color="#FFB81E" v-model="show_unitTyp" :list="unitTyp_list" @confirm="unitTyp_confirm"></u-select>
		<u-select confirm-color="#FFB81E" v-model="show_roomTyp" :list="roomTyp_list" @confirm="roomTyp_confirm"></u-select>
		<u-select confirm-color="#FFB81E" v-model="show_balcony" :list="balcony_list" @confirm="balcony_confirm"></u-select>
		<u-select confirm-color="#FFB81E" v-model="show_clrSys" :list="clrSys_list" @confirm="clrSys_confirm"></u-select>
		<u-select confirm-color="#FFB81E" v-model="show_style" :list="style_list" @confirm="style_confirm"></u-select>
		<u-picker confirm-color="#FFB81E" mode="region" v-model="show_city" @confirm="city_confirm"></u-picker>
		<!-- 选择器 -->
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				type:'',
				designer:'',
				worker:'',
				decoration_mode:'',
				unit_type:'',
				balcony:'',
				clrSys:'',
				style:'',
				budget:'',
				city:'',
				address:'',
				area:'',
			},
			rules: {
				type: [
					{
						required: true, 
						message: '请选择类型', 
						trigger: 'blur'
					}
				],
				designer: [
					{
						required: true, 
						message: '请选择是否需要设计师', 
						trigger: 'blur'
					}
				],
				worker: [
					{
						required: true, 
						message: '请选择是否需要工人', 
						trigger: 'blur'
					}
				],
				decoration_mode: [
					{
						required: true, 
						message: '请选择装修方式', 
						trigger: 'blur'
					}
				],
				unit_type: [
					{
						required: true, 
						message: '请选择', 
						trigger: 'blur'
					}
				],
				balcony: [
					{
						required: true, 
						message: '请选择阳台', 
						trigger: 'blur'
					}
				],
				clrSys: [
					{
						required: true, 
						message: '请选择色系', 
						trigger: 'blur'
					}
				],
				style: [
					{
						required: true, 
						message: '请选择风格', 
						trigger: 'blur'
					}
				],
				budget: [
					{
						required: true, 
						message: '请输入您的预算', 
						trigger: 'blur'
					}
				],
				city: [
					{
						required: true, 
						message: '请选择所在城市', 
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true, 
						message: '请输入详细地址', 
						trigger: 'blur'
					}
				],
				area: [
					{
						required: true, 
						message: '请输入房屋面积', 
						trigger: 'blur'
					}
				],
			},
			type_radio_list: ["毛坯房","翻新房","局部装","工装"],
			sjs_radio_list:["需要","不需要"],
			gr_radio_list:["需要","不需要"],
			zxfs_radio_list:["整装","自装"],
			unitTyp_list:[{
					value: '别墅',
					label: '别墅'
				},
				{
					value: '复式',
					label: '复式'
				}
			],
			show_unitTyp:false,
			roomTyp_list:[{
					value: '房间',
					label: '房间'
				},
				{
					value: '房间1',
					label: '房间'
				}
			],
			show_roomTyp:false,
			balcony_list:[{
					value: '阳台',
					label: '阳台'
				},
				{
					value: '阳台2',
					label: '阳台2'
				}
			],
			show_balcony:false,
			clrSys_list:[{
					value: '深色系',
					label: '深色系'
				},
				{
					value: '浅色系',
					label: '浅色系'
				}
			],			
			show_clrSys:false,
			style_list:[{
					value: '欧式风',
					label: '欧式风'
				},
				{
					value: '混搭风',
					label: '混搭风'
				}
			],
			show_style:false,
			show_city:false,
			style_list:[{
					value: '风格',
					label: '风格'
				},
				{
					value: '风格2',
					label: '风格2'
				}
			],
			show_style:false,
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {},
	onLoad() {},
	methods: {
		unitTyp_confirm(e) {
			this.form.unit_type = e[0]['label'];
			//console.log(e);
		},
		roomTyp_confirm(e){
			this.form.room_type = e[0]['label'];
			//console.log(e);
		},
		balcony_confirm(e) {
			this.form.balcony = e[0]['label'];
			//console.log(e);
		},
		clrSys_confirm(e) {
			this.form.clrSys = e[0]['label'];
			//console.log(e);
		},
		style_confirm(e) {
			this.form.style = e[0]['label'];
			//console.log(e);
		},
		city_confirm(e){
			let province = e.province.label
			let city = e.city.label
			let area = e.area.label
			this.form.city = province + "-" + city + "-" + area;
			//console.log(e)
		},
		submit() {
			// let files = []
			// files = this.$refs.uUpload.lists;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.showToast({
						title: '提交成功',
						icon:"none"
					});
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {
}

.content_box {
	.bgimg {
		width: 100vw;
		height: 294rpx;
		margin-bottom: 60rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.form{
		/deep/.u-form-item{
			padding: 0;
			line-height: 0;
		}
		.form-content{
			display: flex;
			justify-content: space-between;
			margin: 0 22rpx;
			border-bottom: 1rpx solid #F2F2F2;
			.form-lable{
				white-space: nowrap;
				margin-right: 50rpx;
				line-height: 64rpx;
				min-width: 20%;
				.form-lable-text{					
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
				}
				.form-lable-weight{
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
				}
			}
			.form-data{
				width: 100%;
				padding: 0 30rpx 0 52rpx;
			}
			/deep/.u-radio{
				margin-bottom: 60rpx;
			}
			.end-tipc{
				color: #999999;
			}
			.end-text{
				margin-right: 20rpx;
			}
			.row-data{
				padding: 0;
				overflow: hidden;
				margin-top: 50rpx;
				background: #f7f7f7;
				border-radius: 20rpx;
				box-sizing: border-box;
				.textarea{
					height: 300rpx;		
					padding: 42rpx 28rpx;
					width: 100%;
				}
			}
			.form-layout{
				padding-left: 0;
				margin-top: 50rpx;
			}
			.circle-btn{
				background: #4a515b !important;
				color: #FFFFFF;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 90rpx;
				margin: 98rpx 0 50rpx;
				width: 100%;
				font-family: PingFang SC, PingFang SC-Bold;
			}
		}
		.form-padding{
			padding: 40rpx 0;
			align-items: center;
		}
		.border-bottom-none{
			border: none;
		}			
	}
}
</style>
